<template>
  <!-- 发布文章卡片区 -->
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>图片管理</span>
      <el-upload
        style="float: right; padding: 3px 0;"
        action="http://ttapi.research.itcast.cn/mp/v1_0/user/images"
        :headers="setToken"
        name="image"
        :show-file-list="false"
        :on-success="onSuccess"
      >
        <el-button size="small" type="primary">上传图片</el-button>
      </el-upload>
    </div>
    <div class="text item">
      <ul>
        <li class="image-box" v-for="item in imageList" :key="item.id">
          <img :src="item.url" alt />
          <div class="image-bot">
            <el-button type="success" icon="el-icon-star-off" circle></el-button>
            <el-button type="danger" icon="el-icon-delete" circle></el-button>
          </div>
        </li>
      </ul>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'Material',
  data () {
    return {
      imageList: [], // 接收素材图片列表
      // 获取图片的条件
      querycdt: {
        collect: false, // 获取正常的图片，非收藏的
        page: 1, // 页数
        per_page: 20 // 每页数量
      }
    }
  },
  created () {
    this.getImageList()
  },
  computed: {
    // 拼装el-upload需要的token信息
    setToken () {
      let token = JSON.parse(window.sessionStorage.getItem('userinfo')).token
      return { Authorization: 'Bearer ' + token }
    }
  },
  methods: {
    // 上传图片成功后的一个处理
    onSuccess () {
      this.$message.success('上传图片成功~')// 提示
      this.getImageList()// 更新显示
    },
    // 获得真实素材图片
    getImageList () {
      let pro = this.$http.get('/user/images', { params: this.querycdt })
      pro
        .then(result => {
          if (result.data.message === 'OK') {
            // 接收图片
            this.imageList = result.data.data.results
          }
        })
        .catch(err => {
          return this.$message.error('获取图片失败：' + err)
        })
    }
  }
}
</script>

<style lang="less" scoped>
// 素材图片列表样式
.image-box {
  list-style: none;
  width: 200px;
  height: 200px;
  background-color: #fff;
  margin: 25px;
  float: left;
  border: 1px solid #eee;
  border-radius: 5px;
  text-align: center;
  img {
    width: 150px;
    height: 140px;
  }
  .image-bot {
    width: 200px;
    height: 60px;
    line-height: 60px;
    text-align: center;
  }
}
</style>
